import React, { Component } from 'react'
import PubSub, { publish } from "pubsub-js"
// import axios from "axios"

export default class Search extends Component {
    search = async () => {

        const { keyWordElement: { value: keyWord } } = this
        // console.log(keyWord)
        this.props.updateAppState({
            isFirst: false,
            isLoading: true
        })
        PubSub.publish("atguigu", {
            isFirst: false,
            isLoading: true
        })

        //#region 发送网络请求 axios 发送 
        /* 
        axios.get(`/api1/search/users2?q=${keyWord}`).then(res => {
            // this.props.updateAppState({
            //     isLoading: false,
            //     userList: res.data.items
            // })
            PubSub.publish("atguigu", {
                isLoading: false,
                userList: res.data.items
            })
        }).catch(err =>
            PubSub.publish("atguigu", {
                isLoading: false, err: err.message
            }
        ))
        */
        //#endregion

        // #region 发送网络请求-----使用 fetch 发送 (未优化)
        // fetch(`/api1/search/users2?q=${keyWord}`).then(
        //     res => {
        //         console.log("连接服务器成功了",res)
        //         return res.json()
        //     },
        //     err => {
        //         console.log("连接服务器失败了",err)
        //         return new Promise(() => {})
        //     }
        // ).then(
        //     res => {
        //         console.log("获取数据成功",res)
        //     },
        //     err => {
        //         console.log("获取数据失败",err)
        //     }
        // )
        //#endregion

        //#region 发送网络请求 -------- 使用 fetch (优化)
        try {
            const response = await fetch(`/api1/search/users2?q=${keyWord}`)
            const data = await response.json()
            PubSub.publish("atguigu",{
                isLoading:false,
                userList:data.items
            })
        } catch (error) {
            console.log("请求出错",error)
            PubSub.publish("atguigu",{
                isLoading:false,
                err:error.message
            })
        }
        //#endregion
    }
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索 Github 用户</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词" />&nbsp;<button onClick={this.search}>搜索</button>
                </div>
            </section>

        )
    }
}
